import Badge from '@/library/gallery/components/Badge'
import Tabs from '@/library/gallery/components/Tabs'
import { DemoBlock } from '@/library/widgets/DemoBlock'

export default () => (
  <>
    <DemoBlock title="基础用法" padding="0">
      <Tabs activeLineMode="auto">
        <Tabs.Tab title="水果" key="fruits">
          菠萝
        </Tabs.Tab>
        <Tabs.Tab title="蔬菜" key="vegetables" forceRender>
          黄瓜
        </Tabs.Tab>
        <Tabs.Tab
          title={(
            <Badge content="1" style={{ '--right': '-10px', '--top': '8px' }}>
              动物
            </Badge>
          )}
          key="animals"
        >
          蚂蚁
        </Tabs.Tab>
      </Tabs>
    </DemoBlock>

    <DemoBlock title="超长自动滚动" padding="0">
      <Tabs defaultActiveKey="1">
        <Tabs.Tab title="Espresso" key="1">
          1
        </Tabs.Tab>
        <Tabs.Tab title="Coffee Latte" key="2">
          2
        </Tabs.Tab>
        <Tabs.Tab title="Cappuccino" key="3">
          3
        </Tabs.Tab>
        <Tabs.Tab title="Americano" key="4">
          4
        </Tabs.Tab>
        <Tabs.Tab title="Flat White" key="5">
          5
        </Tabs.Tab>
        <Tabs.Tab title="Caramel Macchiato" key="6">
          6
        </Tabs.Tab>
        <Tabs.Tab title="Cafe Mocha" key="7">
          7
        </Tabs.Tab>
      </Tabs>
    </DemoBlock>

    <DemoBlock title="没有内容区" padding="0">
      <Tabs>
        <Tabs.Tab title="水果" key="fruits" />
        <Tabs.Tab title="蔬菜" key="vegetables" />
        <Tabs.Tab title="动物" key="animals" />
      </Tabs>
    </DemoBlock>

    <DemoBlock title="自定义选中项下划线长度" padding="0">
      <Tabs
        activeLineMode="fixed"
        style={{
          '--fixed-active-line-width': '20px',
        }}
      >
        <Tabs.Tab title="超长的tab111" key="1">
          1
        </Tabs.Tab>
        <Tabs.Tab title="超长的tab2" key="2">
          2
        </Tabs.Tab>
        <Tabs.Tab title="超长的tab333" key="3">
          3
        </Tabs.Tab>
        <Tabs.Tab title="超长的tab4444" key="4">
          4
        </Tabs.Tab>
        <Tabs.Tab title="超长的tab55555" key="5">
          5
        </Tabs.Tab>
      </Tabs>
    </DemoBlock>

    <DemoBlock title="选项卡禁止自动拉伸" padding="0">
      <Tabs defaultActiveKey="1" stretch={false}>
        <Tabs.Tab title="Espresso" key="1">
          1
        </Tabs.Tab>
        <Tabs.Tab title="Coffee Latte" key="2">
          2
        </Tabs.Tab>
      </Tabs>
    </DemoBlock>
  </>
)
